<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <button id="btn">开始移动</button>
  <div class="box" id="box"></div>
  <script src="./common.js"></script>
  <script>
    // 12. 将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户多次点击出现加速且运动不能停止的情况，请给出解决代码。

    var box = my$('#box')
    var btn = my$('#btn')

    var timer = null
    var step = 5
    var now = parseInt(window.getComputedStyle(box).left)
    btn.onclick = function () {
      // 下面这一句是关键
      if (timer) clearInterval(timer)
      timer = setInterval(function () {
        now += step
        box.style.left = now + 'px'
      }, 30)
    }
  </script>
</body>
</html>